:global {
  .ant-timeline-item-tail {
    left: 5px;
  }
  .ant-timeline-item-head {
    width: 13px;
    height: 13px;
  }
  html {
    font-size: 12px;
  }
  body {
    margin: 0;
    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    //   sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    // line-height: 1.5;
    // font-weight: 300;
    // color: #111213;
  }
  #containerBox {
    width: 100%;
    display: flex;
    .amap-copyright {
      box-sizing: content-box;
    }
    * {
      box-sizing: border-box;
    }
    .input-textarea {
      color: grey;
      height: 8em;
      overflow: auto;
      border-radius: 0.4rem;
      border: 1px solid #ced4da;
      margin-bottom: 1rem;
    }

    hr {
      margin: 0.5rem 0;
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    p {
      margin-top: 0;
      margin-bottom: 0;
    }

    label {
      display: inline-block;
      margin-bottom: 0.4rem;
    }

    label,
    .btn {
      margin-left: 0;
      font-size: 1rem;
    }

    button,
    input,
    select {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      overflow: visible;
      text-transform: none;
    }

    [type='button']::-moz-focus-inner,
    [type='reset']::-moz-focus-inner,
    [type='submit']::-moz-focus-inner,
    button::-moz-focus-inner {
      padding: 0;
      border-style: none;
    }

    input[type='checkbox'],
    input[type='radio'] {
      box-sizing: border-box;
      padding: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      margin: 0 0.5rem 0 0;
    }

    h4 {
      font-family: inherit;
      line-height: 1.8;
      font-weight: 300;
      color: inherit;
      font-size: 1.1rem;
      margin-top: 0;
      margin-bottom: 0.5rem;
      color: #333;
    }

    .btn {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border: 1px solid transparent;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      background-color: transparent;
      background-image: none;
      color: #25a5f7;
      border-color: #25a5f7;
      padding: 0.25rem 0.5rem;
      line-height: 1.5;
      border-radius: 1rem;
      -webkit-appearance: button;
      cursor: pointer;
    }

    .btn:hover {
      color: #fff;
      background-color: #25a5f7;
      border-color: #25a5f7;
    }

    .btn:hover {
      text-decoration: none;
    }

    .input-item {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 3rem;
    }

    .input-item:last-child {
      margin-bottom: 0;
    }

    .input-item > select,
    .input-item > input[type='text'],
    .input-item > input[type='date'] {
      position: relative;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 1%;
      margin-bottom: 0;
    }

    .input-item > select:not(:last-child),
    .input-item > input[type='text']:not(:last-child),
    .input-item > input[type='date']:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .input-item > select:not(:first-child),
    .input-item > input[type='text']:not(:first-child),
    .input-item > input[type='date']:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .input-item-prepend {
      margin-right: -1px;
    }

    .input-item-text,
    input[type='text'],
    input[type='date'],
    select {
      height: calc(2.2rem + 2px);
    }

    .input-item-text {
      width: 6rem;
      text-align: justify;
      padding: 0.4rem 0.7rem;
      display: inline-block;
      text-justify: distribute-all-lines;
      /*ie6-8*/
      text-align-last: justify;
      /* ie9*/
      -moz-text-align-last: justify;
      /*ff*/
      -webkit-text-align-last: justify;
      /*chrome 20+*/
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: 0;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      text-align: center;
      white-space: nowrap;
      background-color: #e9ecef;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

    .input-item-text input[type='checkbox'],
    .input-item-text input[type='radio'] {
      margin-top: 0;
    }

    .input-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: #fff;
      background-clip: border-box;
      border-radius: 0.25rem;
      width: 18rem;
      border-width: 0;
      border-radius: 0.4rem;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
      position: absolute;
      bottom: 0;
      right: 0;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 0.75rem 1.25rem;
    }

    .input-text {
      line-height: 2rem;
      margin-right: 2rem;
    }

    .info hr {
      margin-right: 0;
      margin-left: 0;
      border-top-color: grey;
    }

    .info {
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border-radius: 0.25rem;
      position: fixed;
      top: 1rem;
      background-color: white;
      width: auto;
      min-width: 18rem;
      border-width: 0;
      right: 1rem;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    }

    .code {
      left: 1.5rem;
      right: 1.5rem;
      top: 1.5rem;
      bottom: 1.5rem;
      overflow: auto;
      margin-bottom: 0rem;
    }

    .code .btn {
      top: 1rem;
      position: absolute;
      right: 1rem;
    }

    .code .result {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      padding: 1rem;
      bottom: 1rem;
      position: absolute;
      top: 5.5rem;
      right: 1rem;
      left: 1rem;
      overflow: auto;
    }

    .code .status {
      color: #80adff;
      display: inline-block;
      font-size: 14px;
    }

    .code h4 {
      display: inline-block;
      max-width: 20rem;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }

    select,
    input[type='text'],
    input[type='date'] {
      display: inline-block;
      width: 100%;
      padding: 0.375rem 1.75rem 0.375rem 0.75rem;
      line-height: 1.5;
      color: #495057;
      vertical-align: middle;
      background: #fff
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
        no-repeat right 0.75rem center;
      background-size: 8px 10px;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    input[type='text'],
    input[type='date'] {
      background: #fff;
      padding: 0.375rem 0.75rem;
    }

    select:focus,
    input[type='text']:focus,
    input[type='date']:focus {
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
    }

    .btn:focus {
      outline: 0;
      box-shadow: none;
    }

    select:focus::-ms-value,
    input[type='text']:focus::-ms-value,
    input[type='date']:focus::-ms-value {
      color: #495057;
      background-color: #fff;
    }

    /* native toastr */
    .native-toast {
      position: fixed;
      background-color: rgba(50, 50, 50, 0.8);
      border-radius: 33px;
      color: white;
      left: 50%;
      text-align: center;
      padding: 6px 12px;
      opacity: 0;
      z-index: 99999;
      transition: transform 0.25s, opacity 0.25s, top 0.25s;
      box-sizing: border-box;
    }

    .native-toast-bottom {
      bottom: 50px;
      -ms-transform: translateX(-50%) translateY(50px);
      transform: translateX(-50%) translateY(50px);
    }

    .native-toast-bottom.native-toast-shown {
      opacity: 1;
      -ms-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
    }

    .native-toast-bottom.native-toast-edge {
      bottom: 0;
    }

    .native-toast-top {
      top: 50px;
      -ms-transform: translateX(-50%) translateY(-50px);
      transform: translateX(-50%) translateY(-50px);
    }

    .native-toast-top.native-toast-shown {
      opacity: 1;
      -ms-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
    }

    .native-toast-top.native-toast-edge {
      top: 0;
    }

    .native-toast-center {
      top: 0;
      -ms-transform: translateX(-50%) translateY(-50px);
      transform: translateX(-50%) translateY(-50px);
    }

    .native-toast-center.native-toast-shown {
      opacity: 1;
      top: 50%;
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }

    .native-toast-edge {
      border-radius: 0;
      width: 100%;
      text-align: left;
    }

    @media screen and (min-width: 40rem) {
      .native-toast:not(.native-toast-edge) {
        max-width: 18rem;
      }
    }

    /*
          max-width does not seem to work in small screen?
        */

    /*@media screen and (max-width: 768px) {
          .native-toast:not(.native-toast-edge) {
            max-width: 400px;
          }
        }
        
        @media screen and (max-width: 468px) {
          .native-toast:not(.native-toast-edge) {
            max-width: 300px;
          }
        }*/

    /* types */

    .native-toast-error {
      background-color: #d92727;
      color: white;
    }

    .native-toast-success {
      background-color: #62a465;
      color: white;
    }

    .native-toast-warning {
      background-color: #fdaf17;
      color: white;
    }

    .native-toast-info {
      background-color: #5060ba;
      color: white;
    }

    [class^='native-toast-icon-'] {
      vertical-align: middle;
      margin-right: 8px;
    }

    [class^='native-toast-icon-'] svg {
      width: 16px;
      height: 16px;
    }

    .input-card .btn {
      margin-right: 1.2rem;
      width: 7rem;
    }

    .input-card .btn:last-child {
      margin-right: 0;
    }
  }
}

.c_title {
  padding: 10px 15px 10px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid #eeeff0;
}
.desBox {
  padding: 10px 15px 10px;
  display: flex;
  border-bottom: 5px solid #f0f2f5;
  width: 100%;
  .des_item {
    // min-width: 170px;
    width: 25%;
  }
  .des_title {
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
  }
  .des_con {
    color: rgba(0, 0, 0, 0.85);
    font-size: 18px;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial,
      noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
  }
}

.leftBox {
  flex: 1;
  flex-flow: 1;
  height: 100%;
  position: relative;
  background: #fff;
}
.rightBox {
  // width: 280px;
  margin-left: 15px;
  background: #fff;
  color: #696b7c;
  .trail_time {
    display: inline-block;
    width: 90px;
  }
  .trail_des {
    margin-left: 15px;
    white-space: nowrap;
  }
  .timelineBox {
    font-size: 15px;
    margin-bottom: 5px;
    display: flex;
    // justify-content: space-between;
  }
}
.markerInfo{
  background-color: rgba(0, 0, 0, 0.5);
}
